<template>
  <div>
    <el-container>
      <el-aside width="200px">
        <div class="title"><h1>发布内容</h1></div>
      </el-aside>
      <el-main>
        <el-form
          ref="form"
          :model="form"
          label-width="120px"
          style="
            background-color: white;
            padding-top: 20px;
            padding-bottom: 20px;
          "
        >
          <el-form-item label="标题">
            <el-input v-model="form.title"></el-input>
          </el-form-item>
          <el-form-item label="简介">
            <el-input v-model="form.introduction"></el-input>
          </el-form-item>
          <el-form-item label="城市">
            <el-input v-model="form.ccity"></el-input>
          </el-form-item>
          <el-form-item label="图片)">
            <img :src="form.picture" alt="" width="200" />
            <el-upload
              v-model="form.picture"
              action=""
              :on-change="getFileAnswer"
              :limit="1"
              list-type="picture"
              :auto-upload="false"
            >
              <el-button size="small" type="primary"
                >选择图片上传，最多上传一张图片</el-button
              >
            </el-upload>
          </el-form-item>
          <el-form-item label="分类">
            <el-select v-model="form.sortid" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.id"
                :label="item.category"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="描述">
            <el-input v-model="form.des"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm">提交</el-button>
          </el-form-item>
        </el-form> </el-main
      >F
    </el-container>
  </div>
</template>
<script>
export default {
  name: "publishcontent",
  data() {
    return {
      form: {
        userid: "",
        title: "",
        introduction: "",
        ccity: "",
        sortid: "",
        picture: "",
        des: "",
      },
      options: [],
      category: "",
    };
  },
  created() {
    this.getClassfiy();
  },
  mounted() {
    this.form.userid = JSON.parse(localStorage.getItem("login_user")).id;
  },
  methods: {
    //获取分类列表
    getClassfiy() {
      let url = "/contentController/getClassfiy";
      let param = "";
      this.$axios
        .get(url, param)
        .then((resp) => {
          this.options = resp.data;
        })
        .catch((err) => {
          console.log("error=", err);
        });
    },
    //提交表单
    submitForm() {
      let url = "/contentController/addContent";
      let param = this.$qs.stringify(this.form);
      this.$axios
        .post(url, param)
        .then((resp) => {
          let f = resp.data;
          if (f) {
            this.$message({
              type: "success",
              message: "发布成功!",
            });
            for(let k in this.form){
              this.form[k]='';
            }
          }else{
             this.$message({
              type: "error",
              message: "发布失败!",
            });
          }
        })
        .catch((err) => {
          console.log("error=", err);
        });
    },
    getFileAnswer(file) {
      this.getBase64(file.raw).then((res) => {
        console.log(res);
        this.form.picture = res;
      });
    },
    //图片转为base64
    getBase64(file) {
      return new Promise(function (resolve, reject) {
        let reader = new FileReader();
        let fileResult = "";
        reader.readAsDataURL(file);
        //开始转
        reader.onload = function () {
          fileResult = reader.result;
        };
        //转 失败
        reader.onerror = function (error) {
          reject(error);
        };
        //转 结束  咱就 resolve 出去
        reader.onloadend = function () {
          resolve(fileResult);
        };
      });
    },
  },
};
</script>
<style scoped>
.title {
  width: 150px;
  background-color: chocolate;
  height: 30px;
  text-align: center;
  line-height: 30px;
}
</style>